<template>
    <!-- html -->
    <div class="toRaw_markRaw">
        <h2>toRaw_markRaw</h2>
        <h4>{{ person.name }}</h4>
        <h4>{{ person.age }}</h4>
        <button @click="changeName">修改name</button>
        <button @click="changeAge">修改age</button>
        <button @click="conslo">打印</button>
        <hr>
        <h4>{{ car2 }}</h4>
        <button @click="car2.price += 10">点我价格加10</button>
        <button @click="carcon">点我打印</button>
    </div>
</template>
<script lang="ts" setup name="toRaw_markRaw">
import { markRaw, reactive, toRaw } from 'vue'

//toRaw 用于获取一个响应式对象的原始对象，toRaw返回的对象不再是响应式的，不会触发视图更新
//reactive包裹的对象，更改对象以后会响应式刷新对象，toRaw的作用是更改对象以后(toRaw(person))，不再刷新页面
let person = reactive({
    name: 'tony',
    age: 18
})

let person2 = toRaw(person)

function changeAge() {
    person2.age += 1
}

function changeName() {
    person2.name += 'x'
}

function conslo() {
    console.log('响应式数据', person)
    console.log('原始数据', person2)

}

// console.log('响应式数据', person)
// console.log('原始数据', person2)



//markRaw：标记一个对象，使其永远不会变成响应式的
//markRaw 设置原始数据（普通对象）不能转换成响应式对象 
let car = markRaw({ brand: '奔驰', "price": 100 })
let car2 = reactive(car)

function carcon() {
    console.log(car)
    console.log(car2)
}

// console.log(car)
// console.log(car2)

</script>

<style scoped>
/* 样式 */
.toRaw_markRaw {
    background-color: #ddd;
    border-radius: 10px;
    padding: 20px;
}
</style>